<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业提交记录</title>
<link href="../../css/stustyle.css" rel="stylesheet">
<!-- 引入bootstrap样式 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- jquery -->
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="../../js/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="../../js/bootstrap-table-zh-CN.min.js"></script>

</head>
<body>
	<div class="cmtitle">我的作业记录</div>
	<div class="cmline"></div>
	<div style="margin-top:50px;">
		<table id="table">
		</table>
		<script>
			
			$("#table").bootstrapTable('destroy'); 
					$("#table").bootstrapTable({ // 对应table标签的id
					      url: "searchWorkRecord", // 获取表格数据的url
					      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
					      striped: true,  //表格显示条纹，默认为false
					      pagination: true, // 在表格底部显示分页组件，默认false
					      pageList: [1, 2], // 设置页面可以显示的数据条数
					      pageSize: 1, // 页面数据条数
					      pageNumber: 1, // 首页页码
					      sidePagination: 'server', // 设置为服务器端分页
					      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
					
					          return {
					              pageSize: params.limit, // 每页要显示的数据条数
					              offset: params.offset, // 每页显示数据的开始行号
					              sort: params.sort, // 要排序的字段
					              sortOrder: params.order, // 排序规则
					              sid:$("#uid",parent.document).val(),	//学生学号
					          }
					      },
					      sortName: 'cid', // 要排序的字段
					      sortOrder: 'desc', // 排序规则
					      columns: [
					          {
					              field: 'cid', // 返回json数据中的name
					              title: '课程号', // 表格表头显示文字
					              align: 'center', // 左右居中
					              valign: 'middle' // 上下居中
					          }, {
					              field: 'cname',
					              title: '课程名称',
					              align: 'center',
					              valign: 'middle'
					          }, {
					              field: 'tname',
					              title: '教师',
					              align: 'center',
					              valign: 'middle'
					          }, {
					              field: 'workName',
					              title: '作业名称',
					              align: 'center',
					              valign: 'middle'
					          }, {
					              field: 'submitTime',
					              title: '提交时间',
					              align: 'center',
					              valign: 'middle'
					          }, {
					              field: 'status',
					              title: '状态',
					              align: 'center',
					              valign: 'middle'
					          }, {
					              title: "操作",
					              align: 'center',
					              valign: 'middle',
					              width: 160, // 定义列的宽度，单位为像素px
					              
					              formatter: function (value, row, index) {
					              	var moption;
					              	if(row.status == "已提交"){
					              		moption = '<a href="javascript:void(0)" data-toggle="modal" data-target="#myModal0">查看</a>';
					              	}
					              	if(row.status == "未提交"){
					              		moption = '<a href="javascript:void(0)"  class="msub">提交</a>';
					              	}
					                return moption;
					              },
					              events: operateEvents = {"click .msub":function(e,value,row,index){
					           			$("#lefile").val("");
					           			$("#photoCover").val("");
					              		$("#myModal1").modal("show");
					              		$("#workTitle").html(row.workName);
					              		$("input[name='workTitle']").val(row.workName);
					              		$("input[name='sid']").val($("#uid",parent.document).val());
					              		$("input[name='cid']").val(row.cid);
					              		$("input[name='tid']").val(row.tid);
					              		
					              	}
					              },           
					          }
					          
					      ],
					      onLoadSuccess: function(){  //加载成功时执行
					            console.info("加载成功");
					      },
					      onLoadError: function(){  //加载失败时执行
					            console.info("加载数据失败");
					      }
					})		
				</script>
	</div>
	<!-- 用于查看数据的模态框 -->
	<div class="modal fade" id="myModal0"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog">
	        <div class="modal-content">
	          <div class="modal-header">
	            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title">提交作业</h4>
	          </div>
	          <div class="modal-body">
	            <p>您已提交本次作业，无法进行二次提交</p>
	          </div>
	          <div class="modal-footer">
	            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
	          </div>
	        </div><!-- /.modal-content -->
	      </div><!-- /.modal-dialog -->
	</div>
	
	<!-- 用于修改数据的模态框 -->
	<div class="modal fade" id="myModal1"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog">
	        <div class="modal-content">
	          <div class="modal-header">
	            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title">提交作业</h4>
	          </div>
			  <div class="modal-body">
					<h4>作业题目：</h4>
					<p id="workTitle"></p>
					<form id="uploadForm" enctype="multipart/form-data" method="post" action="upLoadWork">
						<input name="workTitle" style="display: none;"/>
						<input name="sid" style="display: none;"/>
						<input name="cid" style="display: none;"/>
						<input name="tid" style="display: none;"/>
						<div style="padding-top: 5%">
							<input id="lefile" type="file" style="display:none" name="file">
							<div class="input-append">
								<input id="photoCover" class="input-large" type="text"
									disabled="disabled" style="height:30px;"> <a
									class="btn" onclick="$('input[id=lefile]').click();">浏览</a>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
	            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
	            <button class="btn btn-primary" type="button" id="uploadWork">提交</button>
	          </div>
	        </div><!-- /.modal-content -->
	      </div><!-- /.modal-dialog -->
	</div>
	
	<script type="text/javascript">
		$(function(){
			$('input[id=lefile]').change(function() {  
				//检测是否为pdf文件 
				if($(this).val() == ""){
					return false;
				}
				var fileName = $(this).val();
				var temp = fileName.split('.');
				var culs = temp[1];
				if(culs != 'pdf'){
					alert("只能上传pdf文件");
					return false;
				}
				$('#photoCover').val($(this).val());
				
			});  
			
			$("#uploadWork").click(function(){
				//通过表单进行文件上传
				//$("#uploadForm").submit();
				if($('#photoCover').val() == ""){
					alert("请选择文件");
					return false;
				}
			
				var fileInfo = new FormData($('#uploadForm')[0]);
				
				$.ajax({
					url : "uploadWorkFile", // 请求目标
					type : "post", // 请求类型 POST(加密) 或者 GET(默认)
					data : fileInfo,
					processData : false, 
					contentType : false, 
					contentType:false,
					dataType : 'text',
					async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
					cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
					success : function(data) {
						alert(data);
						//关闭模态框
						$("#myModal1").modal("hide");
					}
				});
				
			});
		});
	</script>
</body>
</html>